<template>
  <el-container class="layout-container">
    <el-aside width="250px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '2']" :router="true" default-active="/hjf/docs/markdown-to-vue-optimize">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><icon-menu /></el-icon>插件
            </template>
            <el-menu-item index="/hjf/docs/markdown-to-vue">Markdown转vue组件</el-menu-item>
            <el-menu-item index="/hjf/docs/markdown-to-vue-optimize">Markdown转vue组件优化</el-menu-item>            
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>样式
            </template>
            <el-menu-item index="/hjf/style/backdrop-filter">backdrop-filter</el-menu-item> 
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-main>
      <el-scrollbar>
        <RouterView />
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script setup>
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
</script>

<style scoped>
  .layout-container {
    height: calc(100vh - 60px);
  }
  .layout-container .el-header {
    position: relative;
    color: var(--el-text-color-primary);
  }
  .layout-container .el-aside {
    border-right: solid 1px var(--el-menu-border-color);
    color: var(--el-text-color-primary);
  }
  .layout-container .el-menu {
    border-right: none;
  }
  .layout-container .el-main {
    padding: 0;
  }
</style>
